﻿<UserControl
    x:Class="CodeShow.CS.Shared.DisplayOrientationDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CodeShow.CS.Shared"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="300"
    Width="400">

    <!--BeginCutPaste-->
    <UserControl.Resources>
        <DataTemplate x:Key="StackPanelOne">
            <StackPanel>
                <TextBlock 
                    Text="{Binding BoxOneText}" 
                    FontSize="16" 
                    Margin="0,30,0,0" 
                    />
                <TextBlock 
                    Text="{Binding BoxTwoText}" 
                    FontSize="16" 
                    Margin="0,30,0,0"
                    />
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="Output">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" x:Name="landscapeOnlyColumn"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" x:Name="portraitOnlyRow"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Grid.Column="0" 
              Background="Aqua">
            <StackPanel 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center" 
                Margin="50">
                <TextBlock  
                    Text="Main Grid" 
                    HorizontalAlignment="Center"
                    FontSize="40"
                    />
            </StackPanel>
        </Grid>
        <Grid x:Name="SideGrid" 
              Grid.Row="0" 
              Grid.Column="1" 
              Background="Brown" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Border Grid.Row="0" 
                    x:Name="borderOne" 
                    BorderBrush="Green" 
                    BorderThickness="10">
                <ContentControl 
                    ContentTemplate="{StaticResource StackPanelOne}" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center" 
                    />
            </Border>
            <Border Grid.Row="1" 
                    x:Name="borderTwo" 
                    BorderBrush="Blue" 
                    BorderThickness="10" 
                    Opacity="{Binding Opacity,ElementName=borderOne}">
                <ContentControl 
                    ContentTemplate="{StaticResource StackPanelOne}" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center" 
                    />
            </Border>
        </Grid>

        <Grid Grid.Row="1" 
              Grid.Column="0" 
              Background="Brown" 
              DataContext="{Binding DataContext, ElementName=SideGrid}" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Border 
                Grid.Column="0" 
                BorderBrush="{Binding BorderBrush, ElementName=borderOne}" 
                BorderThickness="{Binding BorderThickness, ElementName=borderOne}" 
                Opacity="{Binding Opacity,ElementName=borderOne}" >
                <ContentControl 
                    ContentTemplate="{StaticResource StackPanelOne}"
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center"
                    />
            </Border>
            <Border Grid.Column="1"  
                    BorderBrush="{Binding BorderBrush, ElementName=borderTwo}" 
                    BorderThickness="{Binding BorderThickness, ElementName=borderTwo}" 
                    Opacity="{Binding Opacity,ElementName=borderOne}">
                <ContentControl 
                    ContentTemplate="{StaticResource StackPanelOne}" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center" 
                    />
            </Border>
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="DefaultLayout"/>
                <VisualState x:Name="Below768Layout"/>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="Landscape">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                            Storyboard.TargetName="portraitOnlyRow" 
                            Storyboard.TargetProperty="Height">
                            <DiscreteObjectKeyFrame 
                                KeyTime="0" 
                                Value="0"
                                />
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation 
                            BeginTime="0" 
                            Duration="0:0:2" 
                            Storyboard.TargetName="borderOne" 
                            Storyboard.TargetProperty="Opacity" 
                            From="0" 
                            To="1" 
                            />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Portrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                            Storyboard.TargetName="landscapeOnlyColumn" 
                            Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame 
                                KeyTime="0" 
                                Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation 
                            BeginTime="0" 
                            Duration="0:0:2" 
                            Storyboard.TargetName="borderOne" 
                            Storyboard.TargetProperty="Opacity" 
                            From="0" 
                            To="1" 
                            />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    <!--EndCutPaste-->
</UserControl>
